<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>在线测试</title>
</head>
<body>
    <a href="/index" style="display:inline-block;margin:24px 0 0 24px;padding:6px 16px;background:#e6f0ff;color:#1677ff;border-radius:6px;text-decoration:none;font-weight:500;box-shadow:0 1px 4px #e0e7ff;">返回首页</a>
    <h2 style="margin-bottom:24px;">在线测试页面</h2>
    <div id="test-container" style="max-width:600px;margin:0 auto;">
        <div id="progress-bar" style="height:16px;background:#f0f1f2;border-radius:8px;overflow:hidden;margin-bottom:24px;">
            <div id="progress-inner" style="background:#1677ff;height:16px;width:0%;transition:width 0.5s;"></div>
        </div>
        <div id="question-area">
            <!-- 题目内容将由JS动态渲染 -->
        </div>
        <div id="test-actions" style="margin-top:32px;">
            <button id="btn-prev" class="btn" style="margin:8px 8px 8px 0;padding:6px 16px;background:#aaa;color:#fff;border:none;border-radius:4px;" disabled>上一题</button>
            <button id="btn-next" class="btn" style="margin:8px 8px 8px 0;padding:6px 16px;background:#1677ff;color:#fff;border:none;border-radius:4px;">下一题</button>
            <button id="btn-submit" class="btn" style="margin:8px 0;padding:6px 16px;background:#52c41a;color:#fff;border:none;border-radius:4px;display:none;">提交答卷</button>
        </div>
        <div id="result-area" style="margin-top:32px;display:none;"></div>
    </div>
    <script>
    // 示例题目数据
    const questions = [
        { type: 'single', question: 'Java的关键字中用于定义类的是？', options: ['class', 'def', 'struct', 'function'], answer: 0 },
        { type: 'single', question: '下列哪个是Spring Boot的特性？', options: ['自动配置', '手动编译', '无依赖注入', '不支持REST'], answer: 0 },
        { type: 'multi', question: '以下哪些属于前端三大基础？', options: ['HTML', 'CSS', 'JavaScript', 'Python'], answer: [0,1,2] },
        { type: 'judge', question: 'Python是一种编译型语言。', options: ['对', '错'], answer: 1 },
        { type: 'short', question: '简述你对云计算的理解。', answer: '' }
    ];
    let current = 0;
    let userAnswers = Array(questions.length).fill(null);
    function renderQuestion(idx) {
        const q = questions[idx];
        let html = `<div class='question' style='margin-bottom:18px;'><b>第${idx+1}题：</b> ${q.question}</div><div class='options'>`;
        if(q.type==='single'||q.type==='judge') {
            q.options.forEach((opt,i)=>{
                html += `<label style='display:block;margin-bottom:8px;'><input type='radio' name='opt' value='${i}' ${userAnswers[idx]==i?'checked':''}/> ${opt}</label>`;
            });
        } else if(q.type==='multi') {
            q.options.forEach((opt,i)=>{
                html += `<label style='display:block;margin-bottom:8px;'><input type='checkbox' name='opt' value='${i}' ${userAnswers[idx]&&userAnswers[idx].includes(i)?'checked':''}/> ${opt}</label>`;
            });
        } else if(q.type==='short') {
            html += `<textarea style='width:100%;height:60px;' name='opt'>${userAnswers[idx]||''}</textarea>`;
        }
        html += '</div>';
        document.getElementById('question-area').innerHTML = html;
        // 按钮状态
        document.getElementById('btn-prev').disabled = idx===0;
        document.getElementById('btn-next').style.display = idx===questions.length-1?'none':'';
        document.getElementById('btn-submit').style.display = idx===questions.length-1?'inline-block':'none';
        // 进度条
        document.getElementById('progress-inner').style.width = ((idx+1)/questions.length*100)+'%';
    }
    function saveAnswer() {
        const q = questions[current];
        if(q.type==='single'||q.type==='judge') {
            const v = document.querySelector('input[name=opt]:checked');
            userAnswers[current] = v ? Number(v.value) : null;
        } else if(q.type==='multi') {
            const vs = Array.from(document.querySelectorAll('input[name=opt]:checked')).map(e=>Number(e.value));
            userAnswers[current] = vs.length>0 ? vs : null;
        } else if(q.type==='short') {
            const v = document.querySelector('textarea[name=opt]').value;
            userAnswers[current] = v;
        }
    }
    document.getElementById('btn-prev').onclick = function() {
        saveAnswer();
        if(current>0) { current--; renderQuestion(current); }
    };
    document.getElementById('btn-next').onclick = function() {
        saveAnswer();
        if(current<questions.length-1) { current++; renderQuestion(current); }
    };
    document.getElementById('btn-submit').onclick = function() {
        saveAnswer();
        let score = 0, total = 0, detail = '';
        questions.forEach((q,i)=>{
            if(q.type==='single'||q.type==='judge') {
                total++;
                if(userAnswers[i]===q.answer) score++;
                detail += `<div style='margin-bottom:8px;'>第${i+1}题：${userAnswers[i]===q.answer?'<span style="color:#52c41a;">✔</span>':'<span style="color:#f5222d;">✘</span>'} 正确答案：${q.options?q.options[q.answer]:q.answer}</div>`;
            } else if(q.type==='multi') {
                total++;
                const ua = userAnswers[i]||[];
                if(Array.isArray(q.answer) && ua.length===q.answer.length && ua.every(v=>q.answer.includes(v))) score++;
                detail += `<div style='margin-bottom:8px;'>第${i+1}题：${Array.isArray(q.answer)&&ua.length===q.answer.length&&ua.every(v=>q.answer.includes(v))?'<span style="color:#52c41a;">✔</span>':'<span style="color:#f5222d;">✘</span>'} 正确答案：${q.answer.map(idx=>q.options[idx]).join(', ')}</div>`;
            } else if(q.type==='short') {
                detail += `<div style='margin-bottom:8px;'>第${i+1}题：<span style='color:#1677ff;'>主观题，答案略</span></div>`;
            }
        });
        document.getElementById('result-area').innerHTML = `<div style='font-size:20px;font-weight:600;margin-bottom:16px;'>得分：${score} / ${total}</div><div>${detail}</div>`;
        document.getElementById('result-area').style.display = 'block';
        document.getElementById('question-area').style.display = 'none';
        document.getElementById('test-actions').style.display = 'none';
        document.getElementById('progress-bar').style.display = 'none';
    };
    // 初始化
    renderQuestion(current);
    </script>
</body>
</html> 